<template>
  <div class="upload-component">
    <a class="btn" @click="toggleShow">set avatar</a>
    <my-upload
      field="img"
      :noRotate="false"
      :noSquare="true"
      @crop-success="cropSuccess"
      @crop-upload-success="cropUploadSuccess"
      @crop-upload-fail="cropUploadFail"
      v-model="define.show"
      :width="96"
      :height="96"
      url="/upload"
      :params="params"
      :headers="headers"
      img-format="png"
    >
    </my-upload>
    <img :src="imgDataUrl" />
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import 'babel-polyfill'; // es6 shim
import myUpload from './upload-test.vue';
export default defineComponent({
  name: '',
  components: {
    myUpload,
  },
  setup() {
    const define = reactive({
      show: false,
      params: {
        token: '123456798',
        name: 'avatar',
      },
      headers: {
        smail: '*_~',
      },
      imgDataUrl: '', // the datebase64 url of created image
    });

    const toggleShow = () => {
      define.show = !define.show;
    };

    const cropSuccess = (imgDataUrl, field) => {
      console.log('-------- crop success --------');
      define.imgDataUrl = imgDataUrl;
    };

    const cropUploadSuccess = (jsonData, field) => {
      console.log('-------- upload success --------');
      console.log(jsonData);
      console.log('field: ' + field);
    };
    /**
     * upload fail
     *
     * [param] status    server api return error status, like 500
     * [param] field
     */
    const cropUploadFail = (status, field) => {
      console.log('-------- upload fail --------');
      console.log(status);
      console.log('field: ' + field);
    };
    return {
      define,
      toggleShow,
      cropSuccess,
      cropUploadSuccess,
      cropUploadFail,
    };
  },
});
</script>

<style lang="less" scoped>
.upload-component {
  /deep/ .vicp-preview {
    display: flex;
    flex-direction: column;
    .vicp-preview-item {
      margin-bottom: 10px;
    }
  }
}
</style>
